<!--
 * @页面名称:元数据弹框
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="metaData">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
      <el-tab-pane label="内容元数据" name="1">
        <div style="height: 100%">
          <s-table :columns="tableSetting.columns" :data="tableSetting.data"></s-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="背景元数据" name="2">
        <div style="height: 100%">
          <s-table :columns="tableSetting.columns2" :data="tableSetting.data2"></s-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="全文元数据" name="3">
        <div style="height: 100%">
          <s-table :columns="tableSetting.columns3" :data="tableSetting.data3"></s-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="流转元数据" name="4">
        <div style="height: 100%">
          <s-table :columns="tableSetting.columns4" :data="tableSetting.data4"></s-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted } from "vue";
import STable from "@/components/Stable/index.vue";
import { fileSizeFormat } from "@/utils/formatter";
import { useFormatter } from "@/hooks/useFormatter";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// 父级数据
const record = ref();
// 表格初始化hook
const { formatter } = useFormatter();
// tabs标识
const activeName = ref("1");
// 表格配置
const tableSetting = reactive({
  columns: [
    {
      title: "序号",
      width: 90,
      type: "seq",
      sortable: true
    },
    { title: "元数据键", field: "Field_Name", sortable: true },
    {
      title: "元数据值",
      sortable: true,
      formatter({ row }) {
        return formatter(row, record.value);
      }
    }
  ],
  data: [],
  columns2: [
    {
      title: "序号",
      width: 90,
      type: "seq",
      sortable: true
    },
    { title: "元数据键", field: "Field_Name", sortable: true },
    {
      title: "元数据值",
      sortable: true,
      formatter({ row }) {
        return formatter(row, record.value);
      }
    }
  ],
  data2: [],
  columns3: [
    {
      title: "序号",
      width: 90,
      type: "seq",
      sortable: true
    },
    { title: "载体类型", field: "AI_Code", isResize: true, width: "150" },
    { title: "计算机文件名称", field: "AI_Name", isResize: true, width: "150" },
    { title: "格式信息", field: "AI_Source_Extension", isResize: true, width: "150" },
    { title: "计算机文件大小", field: "AI_Source_Size", isResize: true, width: "150", formatter: fileSizeFormat },
    { title: "档案存址", field: "AI_Source_SharePath", isResize: true, width: "150" },
    { title: "文件来源", field: "SourceFile", isResize: true, width: "150" },
    { title: "最后更新时间", field: "AI_FileDateTime", isResize: true, width: "150" },
    { title: "文档创建程序", field: "CreateProgram", isResize: true, width: "150" },
    { title: "签名规则", field: "SignatureRule", isResize: true, width: "150" },
    { title: "签名时间", field: "SigningTime", isResize: true, width: "150" },
    { title: "签名人", field: "Undersigned", isResize: true, width: "150" },
    { title: "签名结果", field: "SignatureResult", isResize: true, width: "150" },
    { title: "签名算法标识", field: "SignatureAlgorithm", isResize: true, width: "150" },
    { title: "证书吊销列表", field: "AI_CertificateRevocation", isResize: true, width: "150" },
    { title: "证书链", field: "AI_CertificateChain", isResize: true, width: "150" },
    { title: "原文杂凑值", field: "HashCode", isResize: true, width: "150" },
    { title: "时间戳", field: "TimeStampData", isResize: true }
  ],
  data3: [],
  columns4: [
    {
      title: "序号",
      width: 90,
      type: "seq",
      sortable: true
    },
    // { title: '环节名称', field: 'NodeName', isResize: true },
    // { title: '处理意见', field: 'Suggestion', isResize: true },
    // { title: '操作部门编号', field: 'OperationDepartmentCode', isResize: true },
    // { title: '操作部门名称', field: 'OperationDepartmentName', isResize: true },
    // { title: '经办人用户姓名', field: 'OperationUserName', isResize: true },
    // { title: '经办人用户编号', field: 'OperationUserId', isResize: true },
    // { title: '处理时间', field: 'OperationTime', isResize: true }
    { title: "处理类型", field: "NodeName", isResize: true },
    { title: "处理者", field: "OperationUserName", isResize: true },
    { title: "处理部门", field: "OperationDepartmentName", isResize: true },
    { title: "处理时间", field: "OperationTime", isResize: true },
    { title: "处理结果", field: "Suggestion", isResize: true }
  ],
  data4: []
});
// 获取内容元数据表格数据
const getTableData1 = (data: any) => {
  record.value = data;
  proxy.$vueAxios
    .post("Master_Base_Data_Disp_Mstr/GetConditional", {
      order: "DDM_Order asc",
      dtoList: [{ fieldName: "FMT_ID", fieldValue: data.FMT_ID }]
    })
    .then((res: any) => {
      console.log(res.List);
      tableSetting.data = res.List.filter((v: any) => v.DDM_Enable_IsMetadata_Content);
    });
};
// 获取背景元数据表格数据
const getTableData2 = (data: any) => {
  proxy.$vueAxios
    .post("Master_Base_Data_Disp_Mstr/GetConditional", {
      order: "DDM_Order asc",
      dtoList: [{ fieldName: "FMT_ID", fieldValue: data.FMT_ID }]
    })
    .then((res: any) => {
      console.log(res.List);
      tableSetting.data2 = res.List.filter((v: any) => v.DDM_Enable_IsMetadata_Contextual);
    });
};
// 获取全文元数据
const getTableData3 = (data: any) => {
  proxy.$vueAxios
    .post("Master_Base_AllInfos/GetConditional", {
      order: "AI_Index asc",
      dtoList: [{ fieldName: "Record_ID", fieldValue: data.Record_ID }]
    })
    .then((res: any) => {
      tableSetting.data3 = res.List;
    });
};
// 获取流转元数据
const getTableData4 = (data: any) => {
  proxy.$vueAxios
    .post("Master_Base_WorkFlow_Metadata/GetConditional", {
      order: "operationTime asc",
      dtoList: [{ fieldName: "Record_ID", fieldValue: data.Record_ID }]
    })
    .then((res: any) => {
      tableSetting.data4 = res.List;
    });
};
const tabChange = val => {
  // getTableData1();
  console.log(val);
  switch (val) {
    case "1":
      getTableData1(record.value);
      break;
    case "2":
      getTableData2(record.value);
      break;
    case "3":
      getTableData3(record.value);
      break;
    case "4":
      getTableData4(record.value);
      break;
  }
};
onMounted(() => {
  // getTableData1();
});
defineExpose({ getTableData1, record, activeName });
</script>

<style scoped lang="scss">
.metaData {
  height: 100%;
}
.el-tabs {
  height: 100%;
}
:deep(.el-tabs__content) {
  height: calc(100% - 55px);
}
.el-tab-pane {
  height: 100%;
}
</style>
